<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="topAddActivity"
        >
          添加主讲老师
        </el-button>
        <div style="display: inline-block;margin-left: 20px">
          <el-input v-model="teacherName" placeholder="讲师名称搜索" size="mini" />
        </div>

        <el-button
          circle
          type="primary"
          icon="el-icon-search"
          @click="searchTeacher"
        />
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="teacherList">
          <el-table-column align="center" prop="name" label="讲师名字" width="120px" />
          <el-table-column align="center" label="讲师头像" width="120px">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.avatar" alt="讲师头像">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="背景图" width="120px">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.background_img" alt="背景图">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="description" label="讲师介绍" show-overflow-tooltip />
          <el-table-column align="center" prop="sort" label="排序" width="80px">
            <template slot-scope="scope">
              <div v-show="!sortShow&& (sortId == scope.row.id) ">
                <el-input v-model="scope.row.sort" size="mini" @blur="sortInputChange(scope.row)" />
              </div>
              <div v-show="sortShow || (sortId != scope.row.id)" @click="sortClick(scope.row)">
                {{ scope.row.sort }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="hanldetoKT(scope.row.id)"
              >查看主讲课题</el-button>

              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="hanldePreview(scope.row.id)"
              >查看</el-button>

              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
    <el-dialog title="添加主讲老师" :visible.sync="dialogVisible" @close="dialogClose">
      <el-form ref="dialog" :model="addTeacherObj" :rules="rule" label-position="" label-width="120px">
        <el-form-item label="讲师名称:" prop="name">
          <el-input v-model="addTeacherObj.name" />
        </el-form-item>
        <el-form-item label="讲师介绍:" prop="description">
          <el-input v-model="addTeacherObj.description" />
        </el-form-item>
        <!-- <el-form-item label="排序:" prop="sort">
          <el-text v-model="addTeacherObj.sort" />
        </el-form-item> -->
        <el-form-item label="讲师头像:" prop="avatar">
          <el-upload
            class="avatar-uploader"
            :action="upload_url"
            :show-file-list="false"
            :on-success="avatar_uploadSuccess"
            :before-upload="beforeUpload"
            :headers="header"
          >
            <img v-if="addTeacherObj.avatar" :src="addTeacherObj.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <!-- <span slot="tip" class="el-upload__tip">图片大小不能超过2M</span> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="背景图" prop="background_img">
          <el-upload
            class="avatar-uploader"
            :action="upload_url"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :headers="header"
          >
            <img v-if="addTeacherObj.background_img" :src="addTeacherObj.background_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <span slot="tip" class="el-upload__tip">图片大小不能超过2M，背景为长方形</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="disabled" type="primary" class="iconfont iconicon_add" @click="createTeacher">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { createTeacher, getTeacherList, delTeacher, getTeacherInfo, updateTeacher, changeSort } from '@/api/teacher.js'
import { getToken } from '@/utils/auth'
const baseUrl = process.env.VUE_APP_BASE_API
export default {
  data() {
    return {
      sortShow: true,
      sortId: '',
      sortChangeNum: '',
      createOrUpdate: 'create',
      disabled: false,
      loading: false,
      dialogVisible: false,
      teacherName: '',
      teacherList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      upload_url: baseUrl + '/admin/user/uploadImage',
      header: {
        Authorization: getToken()
      },
      addTeacherObj: {
        background_img: '',
        description: '',
        name: '',
        avatar: '',
      },
      rule: {
        background_img: [
          { required: true, message: '背景图片为必填项', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '讲师介绍为必填项', trigger: 'blur' },
          { min: 10, message: '活动文案最少10个字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '讲师姓名为必填项', trigger: 'blur' },
          { min: 2, message: '讲师姓名最少2个字', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '到期时间为必填项', trigger: 'blur' }
        ]
        // sort: [
        //   { required: true, message: '限制条件为必填项', trigger: 'blur' }
        // ]
      }
    }
  },
  mounted() {
    this.getTeacherList()
  },
  methods: {
    avatar_uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addTeacherObj.avatar = response.data.url
      } else {
        this.$message.error(response.msg)
      }
    },
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addTeacherObj.background_img = response.data.url
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    sortClick(row) {
       console.log('我点击了值',row) 
      this.sortShow = false
      this.sortChangeNum = row.sort
      this.sortId = row.id
    },
    sortInputChange(row) {
      console.log('我改变了值',row)
      this.sortShow = true
      const obj = {
        teacher_id: row.id,
        sort: row.sort
      }
      changeSort(obj).then(res => {
        this.$message.success(res.msg)
        this.getTeacherList()
      })
    },
    searchTeacher() {
      this.getTeacherList()
    },
    getTeacherList() {
      this.loading = true
      var params = {}
      if(this.teacherName){
         params = {
          teacher_name: this.teacherName,
          page: this.page,
          page_size: this.pageSize
        }
      }else{
         params = {
          page: this.page,
          page_size: this.pageSize
        }
      }
      
      getTeacherList(params).then(res => {
        this.teacherList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.getTeacherList()
    },
    createTeacher() {
      this.$refs.dialog.validate(valid => {
        if (!valid) {
          return false
        }
       
        if (this.createOrUpdate == 'create') {
          createTeacher(this.addTeacherObj).then(res => {
            this.$message.success(res.msg)
            this.dialogVisible = false
            this.getTeacherList()
             this.disabled = true
          }).catch(err => {
          })
        } else {
          // 否则就是更新修改
          updateTeacher(this.addTeacherObj).then(res => {
            this.$message.success(res.msg)
            this.dialogVisible = false
            this.getTeacherList()
             this.disabled = true
          }).catch(err => {

          })
        }
      })
    },
    topAddActivity() {
      this.dialogVisible = true
      this.createOrUpdate = 'create'
    },
    hanldetoKT(id){
      this.$router.push({ path: './teacher-class?id=' + id })
    },
    hanldePreview(id) {
      this.dialogVisible = true
      this.createOrUpdate = 'update'
      const obj = { teacher_id: id }
      getTeacherInfo(obj).then(res => {
        this.addTeacherObj = res.data
        this.addTeacherObj.teacher_id = res.data.id
      })
    },
    handleDelete(id) {
      this.$confirm('确认删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定 则执行的逻辑
        delTeacher({ teacher_id: id }).then(res => {
          this.$message.success(res.msg)
          this.getTeacherList()
        })
      })
    },
    dialogClose() {
      this.disabled = false
      this.addTeacherObj = {
        background_img: '',
        description: '',
        name: '',
        avatar: '',
      }
    }
  }
}
</script>

<style>
  img{
    width: 100px;
    height: 100px;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
      border-color: #409eff;
  }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
  }
</style>
